<template>
  <a-card :bordered="false">
    <a-tabs :active-key="activeTemplateId" tabPosition="top" @change="handleChangeActiveTemplateId">
      <a-tab-pane v-for="template in templateList" :key="template.dataId">
        <template slot="tab">
          {{ template.templateName }}
          <a-icon type="edit" style="margin-left: 10px" @click.stop="handleEditTemplate(template)" />
          <a-popconfirm title="确定删除吗?" @confirm.stop="() => handleDeleteTemplate(template.dataId)">
            <a-icon type="delete" />
          </a-popconfirm>
        </template>
        <a-table
          rowKey="dataId"
          :loading="dataLoading"
          :columns="columns"
          :data-source="templateProjectList"
          :row-selection="rowSelection"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="handleEditProject(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteProject(record.dataId)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="addBtn">
        <template slot="tab">
          <a-icon type="plus" @click="handleAddTemplate" />
        </template>
      </a-tab-pane>
      <a-button type="danger" slot="tabBarExtraContent" @click="handleAddProject">
        添加项目
      </a-button>
    </a-tabs>

    <a-row type="flex" justify="center">
      <a-col :span="4">
        <a-button type="danger" @click="handleSaveTemplateProjects">
          保存
        </a-button>
      </a-col>
    </a-row>

    <template-modal ref="templateModalForm" @ok="templateModalFormOk"></template-modal>
    <project-modal ref="projectModalForm" @ok="projectModalFormOk"></project-modal>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import TemplateModal from './modules/TemplateModal'
import ProjectModal from './modules/ProjectModal'
import moment from 'moment'
import { mapGetters } from 'vuex'

export default {
  name: 'Template',
  components: { TemplateModal, ProjectModal },
  data() {
    return {
      dataLoading: true,
      activeTemplateId: 0,
      templateList: [],
      columns: [
        // {
        //   title: '编号',
        //   dataIndex: 'dataId',
        //   key: 'dataId',
        //   scopedSlots: { customRender: 'dataId' }
        // },
        {
          title: '复诊项目',
          dataIndex: 'templateProjectName',
          key: 'templateProjectName',
          scopedSlots: { customRender: 'templateProjectName' }
        },
        {
          title: '详情',
          dataIndex: 'templateProjectDesc',
          key: 'templateProjectDesc',
          scopedSlots: { customRender: 'templateProjectDesc' }
        },
        {
          title: '顺序',
          dataIndex: 'orderNum',
          key: 'orderNum',
          scopedSlots: { customRender: 'orderNum' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 170
        }
      ],
      selectedRowKeys: [],
      templateProjectList: []
    }
  },
  watch: {
    activeTemplateId() {
      this.selectedRowKeys = []
      this.handleGetTemplateProjectList()
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          this.selectedRowKeys = selectedRowKeys
        }
      }
    }
  },
  created() {
    this.getInit()
  },
  methods: {
    ...mapGetters(['doctorId', 'orgCode']),
    async getInit(type) {
      await this.handleGetTemplateList(type)
      await this.handleGetTemplateProjectList()
    },
    handleGetTemplateList(type) {
      postAction('flup/template/list', { doctorId: this.doctorId(), orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.templateList = res.result
          if (type == 1) {
            this.activeTemplateId =
              this.templateList[this.templateList.length - 1] && this.templateList[this.templateList.length - 1].dataId
          } else {
            this.activeTemplateId = this.templateList[0] && this.templateList[0].dataId
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleGetTemplateProjectList() {
      this.dataLoading = true
      postAction('flup/template/project/list', {
        templateId: this.activeTemplateId,
        doctorId: this.doctorId(),
        orgCode: this.orgCode()
      })
        .then(res => {
          if (res.success) {
            this.templateProjectList = res.result.reverse()
            this.selectedRowKeys = []
            if (this.templateProjectList.length > 0) {
              this.templateProjectList.forEach(item => {
                if (item.flag === true) {
                  this.selectedRowKeys.push(item.dataId)
                }
              })
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.dataLoading = false
        })
    },
    handleAddTemplate() {
      this.$refs.templateModalForm.add()
      this.$refs.templateModalForm.title = '新增'
      this.$refs.templateModalForm.disableSubmit = false
    },
    handleEditTemplate(record) {
      this.$refs.templateModalForm.edit(record)
      this.$refs.templateModalForm.title = '编辑'
      this.$refs.templateModalForm.disableSubmit = false
    },
    handleDeleteTemplate(id) {
      getAction('flup/template/remove', { id }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getInit()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleAddProject() {
      this.$refs.projectModalForm.add()
      this.$refs.projectModalForm.title = '新增'
      this.$refs.projectModalForm.disableSubmit = false
    },
    handleEditProject(record) {
      this.$refs.projectModalForm.edit(record)
      this.$refs.projectModalForm.title = '编辑'
      this.$refs.projectModalForm.disableSubmit = false
    },
    handleDeleteProject(id) {
      getAction('flup/template/project/remove', { id }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.handleGetTemplateProjectList()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleChangeActiveTemplateId(key) {
      if (key === 'addBtn') {
        return false
      } else {
        this.activeTemplateId = key
      }
    },
    templateModalFormOk() {
      this.getInit(1)
    },
    projectModalFormOk() {
      this.getInit()
    },
    handleSaveTemplateProjects() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.error('请至少选择一个复诊项目')
        return false
      }

      this.dataLoading = true
      postAction('flup/template/projects', {
        templateId: Number(this.activeTemplateId),
        projectIds: this.selectedRowKeys,
        doctorId: this.doctorId(),
        orgCode: this.orgCode()
      })
        .then(res => {
          if (res.success) {
            this.$message.success('保存成功')
            this.getInit()
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.dataLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped></style>

